<template>

    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.createState.visible"
            :title="api.createState.title"
            destroy-on-close
            @close="api.onCloseCreate()"
    >
        <el-transfer
                :data="api.tableState.dataSource"
                :props="{key:'id',label:'name'}"
                :titles="['待选列表','已选列表']"
                filterable
        >
        </el-transfer>

    </el-dialog>
</template>

<script lang="ts" setup>
import {WeChatUserApi} from "~/api/wechat/user/user.api";
import {reactive, ref, watch} from "vue";

interface Props {
    api: WeChatUserApi;
}

const props = withDefaults(defineProps<Props>(), {});
const {api} = reactive(props);
const formRef = ref();

watch(() => props.api.createState.visible, value => {
    if (value) {
        api.onListPage();
    }
});
</script>

<style lang="scss" scoped>

</style>
